<template name="livechatManagers">
	{{#requiresPermission 'manage-livechat-managers'}}
		<form id="form-manager" class="form-inline">
			<div class="form-group">
				{{> livechatAutocompleteUser
					onClickTag=onClickTagManagers
					list=selectedManagers
					deleteLastItem=deleteLastManager
					onSelect=onSelectManagers
					collection='UserAndRoom'
					endpoint='users.autocomplete'
					field='username'
					sort='username'
					label="Search_by_username"
					placeholder="Search_by_username"
					name="username"
					exceptions=exceptionsManagers
					icon="at"
					noMatchTemplate="userSearchEmpty"
					templateItem="popupList_item_default"
					modifier=managerModifier
				}}
			</div>
			<div class="form-group">
				<button name="add" class="rc-button rc-button--primary add" disabled='{{isloading}}'>{{_ "Add"}}</button>
			</div>
		</form>
		<div class="rc-table-content">
			<form class="search-form" role="form">
				<div class="rc-input__wrapper">
					<div class="rc-input__icon">
						{{#if isloading}}
							{{> loading }}
						{{else}}
							{{> icon block="rc-input__icon-svg" icon="magnifier" }}
						{{/if}}
					</div>
					<input id="managers-filter" type="text" class="rc-input__element"
							placeholder="{{_ "Search"}}" autofocus dir="auto">
				</div>
			</form>
			<div class="results">
				{{{_ "Showing_results" managers.length}}}
			</div>

			{{#table fixed='true' onScroll=onTableScroll}}
				<thead>
					<tr>
						<th><div class="table-fake-th">{{_ "Name"}}</div></th>
						<th width="33%"><div class="table-fake-th">{{_ "Username"}}</div></th>
						<th width="33%"><div class="table-fake-th">{{_ "Email"}}</div></th>
						<td width="40px">&nbsp;</td>
					</tr>
				</thead>
				<tbody>
					{{#each managers}}
						<tr class="rc-table-tr user-info row-link" data-id="{{_id}}">
							<td>
								<div class="rc-table-wrapper">
									<div class="rc-table-avatar user-image status-{{status}}">{{> avatar username=username}}</div>
									<div class="rc-table-info">
										<span class="rc-table-title">
											{{name}}
										</span>
									</div>
								</div>
								<div class="rc-table-wrapper">
									<div class="rc-table-info">
										<span class="rc-table-title">
											{{fname}}
										</span>
									</div>
								</div>
							</td>
							<td>{{username}}</td>
							<td>{{emailAddress}}</td>
							<td>
								<a href="#remove" class="remove-manager">
									<i class="icon-trash"></i>
								</a>
							</td>
						</tr>
					{{/each}}
				</tbody>
			{{/table}}
		</div>
	{{/requiresPermission}}
</template>
